<template>
	<view class="box-all" style="height: 100vh;background-color: #f5f7f9;">
		<view class="container">
			<view class="info-box primary-bg">
				<button open-type="getUserInfo" class="avatar">
					<open-data type='userAvatarUrl' class="userinfo" mode="cover"></open-data>
				</button>
				<view class="user-info">
					<view class="username text-white">说说说<!-- {{userInfo.nickname}} --></view>
					<view class="tips-txt">{{userInfo && userInfo.is_member ? '欢迎回来，去运动吧！' : '欢迎来到家宝健身，你还不是会员'}}</view>
				</view>
			</view>
			<view class="list-container">
				<navigator url="/pages/member_card_order/list">
					<view class="primary-bg i-list-item">
						<u-icon name="order" color="#605e5d" size="30" style="margin-left: 8px;" label='活动订单'
							label-pos="bottom"></u-icon>
					</view>
				</navigator>
				<view class="primary-bg i-list-item">
					<u-icon name="coupon" color="#605e5d" size="30" style="margin-left: 8px;" label='会员权益'
						label-pos="bottom"></u-icon>
				</view>
				<view class="primary-bg i-list-item">
					<u-icon name="coupon" color="#605e5d" size="30" style="margin-left: 8px;" label='商家入驻'
						label-pos="bottom"></u-icon>
				</view>
				<button open-type="contact" class="primary-bg i-list-item" style="box-sizing:content-box;">
					<u-icon name="server-man" color="#605e5d" size="30" style="margin-left: 8px;" label='联系客服'
						label-pos="bottom"></u-icon>
				</button>
			</view>
		</view>
		<view class="map">
			<view class="ditu">
				<map style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :scale="scale"
					:markers="marker" @markertap="toMap"></map>
					<view class="" style="display: flex;">
						<view class="navigationText" @click="toMap">
						<u-icon name="map" color="#605e5d" size="26" style="margin-left: 8px;" label="亳州市利辛县某某街道某某号家宝健身房"></u-icon> <view class="" style="margin-left: 15px;margin-right: 10px;">|</view>
						</view>
						<view class="serve" data-phone="15255911229" @tap="call" style="margin-left: 8px; margin-top: 15px;">
						    <u-icon name="phone" color="#605e5d" size="26"></u-icon>
						</view>
					</view>
					
			</view>
			
		</view>
		<view class="user-protocol">
			<div style="display: flex; justify-items: center; justify-content: center; color: #979797;">
				点击查看<div @click="togglePopup" style="color: #872d97;">⟪个人信息保护政策⟫</div>、⟪营业执照⟫
			</div>
			<Popup :show="show" @close="close" @open="open"  />
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted} from 'vue';
	import {useRouter} from 'vue-router';
	import Popup from '@/pages/popup/personal.vue';

	const latitude = ref(33.143371); // 设置默认纬度
	const longitude = ref(116.187161); // 设置默认经度
	const marker = ref([{
		id: 0,
		latitude: latitude.value, // 使用响应式引用
		longitude: longitude.value, // 使用响应式引用
		alpha: 1, // 透明度
	}]);
	const scale = ref(14); // 地图缩放程度
	const address = ref('');
	// 定义一个响应式变量来控制弹窗的显示与隐藏
	const show = ref(false);
	
	const open = () => {
	  console.log('open');
	};
	
	const close = () => {
	  show.value = false;
	  console.log('close');
	};
	
	const togglePopup = () => {
		console.log(111,show.value)
	  show.value = true;
	};

	const toMap = () => {
		console.log('点击地图');
		uni.openLocation({
			longitude: Number(116.187161),
			latitude: Number(33.143371),
			name: '奥林清华',
			address: '安徽省亳州市利辛县永康路',
			success: function(res) {
				console.log('打开系统位置地图成功')
			},
			fail: function(error) {
				console.log(error)
			}

		});
	};
	const call = (event) => {
	    // 获取手机号码
	    const phoneNumber = event.currentTarget.dataset.phone;
	    // 调用 API 拨打电话
	    uni.makePhoneCall({
	        phoneNumber: phoneNumber,
	        success: () => {
	            console.log('拨打电话成功');
	        },
	        fail: (error) => {
	            console.error('拨打电话失败', error);
	        }
	    });
	};
	// const userInfo = ref(null);
	// const router = useRouter();

	// // 假设您有一个方法来获取用户信息
	// const getUserInfo = () => {
	//   // 这里应该是获取用户信息的逻辑，例如从存储中读取或从 API 请求
	//   // 模拟从存储中读取
	//   const storedUserInfo = uni.getStorageSync('user_info') || {};
	//   userInfo.value = storedUserInfo;
	// };

	// onMounted(getUserInfo);
</script>
<style scoped lang="scss">
	@import "index.scss"
</style>